<template>
  <el-popover placement="bottom" width="600" trigger="click">
    <div class="wrap-rules" v-loading="listLoading">
      <div v-for="(item, idx) in industryRules" :key="idx" class="item-rule">
        <div class="item-title">规则{{ idx+1 }}：</div>
        <pre class="">{{ item.mid_table_remark_021 | showRuleContent }}</pre>
      </div>
    </div>
    <i
      class="el-icon-question"
      style="font-size: 16px; cursor: pointer"
      slot="reference"
      @click="handleShowRules"
    ></i>
  </el-popover>
</template>
<script>
import { Base64 } from "js-base64";
import { middleList } from "@/api/middle";

export default {
  name: "CopmIconRule",
  props: {
    industryId: {
      type: [String,Number],
      default: "",
    },
  },
  data() {
    return {
      industryRules: [],
      listLoading: false,
    };
  },
  filters: {
    showRuleContent(val) {
      console.log(val, ">>>>>>>>>>>>>>>>>>>>>>");
      if (!val) {
        return "";
      }
      try {
        let tmp = Base64.decode(val);
        return tmp;
      } catch (error) {
        console.log(error, ">>>>>>>>>jkjk");
        return val;
      }
    },
  },
  methods: {
    /*
     * 获取页面数据
     * */
    getList() {
      this.listLoading = true;
      middleList(
        this.Qs.stringify({
          invoke_method: "public_load_middle_table_list",
          pre_db_para_middle_table_name:
            "public_middle_table_lite_mod_ai_chatgpt",
          type_middle_app: 20001,
          type_inner_app: 1001,
          is_online: 0,
          mid_table_remark_008: this.industryId,
        })
      ).then((response) => {
        this.industryRules = response.page_content;
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false;
        }, 0.5 * 1000);
      });
    },
    handleShowRules() {
      this.industryRules = [];
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap-rules{
  max-height: 320px;
  overflow: auto;
  .item-rule{
    .item-title{
      font-weight: 600;

    }
  }
}
</style>
